<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="static/css/admin.css"/>
</head>
<body>
<div style="width: 95%;margin: 26px auto;">
    <div id="table_orderAdmin">
    </div>
</div>
<div style="display: none;width: 95%;padding: 10px;margin: 26px auto;" id="stepView">
    <div id="steps"></div>
    <div style="float: right;margin: 6px;" class="layui-btn layui-btn-normal" id="steps_btn">
    </div>
</div>
<script type="text/html" id="addAdminUserOperationTpl">
    <div>
        <button class="layui-btn layui-btn-sm layui-btn-normal"
                onclick="orderProgress('{{d.orderState}}','{{d.orderList[0].releaseUserPojo.id}}','{{d.orderList[0].purchaseUser}}','{{d.orderId}}')">
            查看进度
        </button>
    </div>
</script>
<script type="text/html" id="payWayTpl">
    {{# if(d.orderList[0].purchaseWay == 0 ){ }}
    <span>支付宝</span>
    {{# } else if(d.orderList[0].purchaseWay == 1 ) { }}
    <span>微信</span>
    {{# } else {}}
    <span>其他</span>
    {{# }}}
</script>
<script type="text/html" id="orderStateTpl">
    {{# if(d.orderState == 0 ){ }}
    <span style="color: #fca130;">等待买家付款</span>
    {{# } else if(d.orderState == 1 ) { }}
    <span style="color: darkorange;">待发货</span>
    {{# } else if(d.orderState == 2 ) { }}
    <span style="color: green;">已发货</span>
    {{# } else {}}
    <span style="color: dodgerblue;">订单完成</span>
    {{# }}}
</script>
<script type="text/html" id="addAdminUserStateTpl">
    {{#  if(d.accountState == 0 ){ }}
    <p style="color: mediumseagreen;">正常</p>
    {{#  } else if(d.accountState == 1 ) { }}
    <p style="color:darkorange;">被冻结</p>
    {{# }}}
</script>
<script>
    let orderAdminTable = null;

    var steps = null;
    var stepsData = null;
    layui.use('steps', function () {
        steps = layui.steps;
        stepsData = [
            {'title': "待买家付款", 'desc': ""},
            {'title': "待卖家发货", 'desc': ""},
            {'title': "待买家确认收货", 'desc': ""},
            {'title': "订单完成", 'desc': ""}
        ];
        steps.make(stepsData, '#steps', 0);
    });


    layui.use('table', function () {
        var table = layui.table;

        orderAdminTable = table.render({
            elem: '#table_orderAdmin'
            , height: 480
            , cellMinWidth: 100
            , url: 'http://localhost/campus/admin/order/getAllOrder'
            , page: {
                layout: ['count']
            } //开启分页
            , toolbar: true
            , defaultToolbar: [{
                title: '刷新'
                , layEvent: 'refresh'
                , icon: 'layui-icon-refresh-1'
            }, 'filter', 'exports', 'print',]
            , cols: [[ //表头
                {field: 'orderId', title: '订单号', width: '15%', align: 'center', sort: true, fixed: 'left'}
                , {
                    field: 'realName', title: '卖家', width: '8%', align: 'center'
                    , templet: function (d) {
                        return d.orderList[0].releaseUserPojo.realName
                    }
                }
                , {field: 'userName', title: '买家', width: '8%', align: 'center'}
                , {field: 'phone', title: '买家联系方式', width: '11%', align: 'center'}
                , {field: 'productNames', title: '商品', width: '13%', align: 'center'}
                , {
                    field: 'totalPrice', title: '总价格', width: '9%', sort: true, align: 'center'
                    , templet: function (d) {
                        return '<p style="color: #ff4136">' + d.totalPrice + '元</p>'
                    }
                }
                , {
                    field: 'purchaseWay', title: '支付方式', width: '8%', align: 'center'
                    , templet: '#payWayTpl'
                }
                , {
                    field: 'orderState', title: '交易状态', width: '8%', align: 'center'
                    , templet: '#orderStateTpl'
                }
                , {
                    field: 'purchaseTime', title: '下单时间', width: '12%', sort: true, align: 'center'
                    , templet: function (d) {
                        return '<p style="color: deepskyblue">' + d.purchaseTime + '</p>'
                    }
                }
                , {field: 'operation', title: '操作', width: '8%', align: 'center', templet: "#addAdminUserOperationTpl"}
            ]]
            , parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.count, //解析数据长度
                    "data": res.data.orders //解析数据列表
                };
            }
        });

        table.on('toolbar()', function (obj) {
            switch (obj.event) {
                case 'refresh':
                    orderAdminTable.reload();
                    break;
            }
        });

    });


    var stepsIndex = 0;

    function orderProgress(state, releaseUser, purchaseUser, orderId) {
        state = parseInt(state) + 1;
        steps.render(stepsData, '#steps', state);

        let btn = $('#steps_btn');

        $(btn).css('display', 'block');
        $(btn).attr('orderId', orderId);
        if (state === 1 || state === 3) {
            $(btn).text("催买家");
            $(btn).attr('state', state);
            $(btn).attr('purchaseUser', purchaseUser);
        } else if (state === 2) {
            $(btn).text("催卖家");
            $(btn).attr('state', state);
            $(btn).attr('releaseUser', releaseUser);
        } else
            $(btn).css('display', 'none');

        stepsIndex = layer.open({
            type: 1
            , area: "680px"
            , resize: false
            , title: '订单进度'
            , content: $('#stepView')
        });
    }

    $('#steps_btn').click(function () {
        let status = $(this).attr("state");
        status = parseInt(status);
        let orderId = $(this).attr("orderId");
        let param = {};
        if (status === 1 || status === 3) {
            param["receiveUser"] = $(this).attr("purchaseUser");
            param["content"] = "尊敬的买方你好，请您尽快到订单中心将订单号为" + orderId + "的流程尽快走完，谢谢配合！";
        } else if (status === 2) {
            param["receiveUser"] = $(this).attr("releaseUser");
            param["content"] = "尊敬的卖方你好，请您尽快到订单中心将订单号为" + orderId + "的流程尽快走完，谢谢配合！";
        }
        $.ajax({
            url: "http://localhost/campus/admin/message/add"
            , type: "POST"
            , contentType: "application/json"
            , data: JSON.stringify(param)
            , success: function (res) {
                let icon = res.success ? 1 : 2;
                layer.msg(res.message, {
                    icon: icon, time: 2000
                });
                layer.close(stepsIndex);
            }
        });
    });
</script>
</body>
</html>
